<template>
  <div class="category-sidebar">
    <h3 class="category-title">工具分类</h3>
    <ul class="category-list">
      <li
        v-for="category in categories"
        :key="category.id"
        :class="['category-item', { active: selectedCategory === category.id }]"
        @click="$emit('selectCategory', category.id)"
        :style="{ '--category-color': category.color }"
      >
        <img class="icon" :src="category.icon" alt="" srcset="" />
        <span>{{ category.name }}</span>
        <span class="category-count">{{ getCategoryCount(category.id) }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  categories: {
    type: Array,
    required: true
  },
  selectedCategory: {
    type: String,
    default: 'all'
  },
  tools: {
    type: Array,
    default: () => []
  }
})

defineEmits(['selectCategory'])

// 获取分类下的工具数量
const getCategoryCount = (categoryId) => {
  console.log(props)
  if (categoryId === 'all') return props.tools.length
  return props.tools.filter(tool => tool.category === categoryId).length
}
</script>

<style scoped>
.category-sidebar {
  width: 300px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 25px 0;
  height: fit-content;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.icon {
  width: 50px;
  height: 50px;
}

.category-title {
  padding: 0 25px 15px;
  font-weight: bold;
  color: white;
  font-size: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 15px;
}

.category-list {
  list-style: none;
}

.category-item {
  padding: 15px 25px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.8);
  position: relative;
  overflow: hidden;
}

.category-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: var(--category-color);
  transition: width 0.3s;
  opacity: 0.3;
}

.category-item:hover {
  color: white;
  background: rgba(255, 255, 255, 0.1);
}

.category-item:hover::before {
  width: 5px;
}

.category-item.active {
  color: white;
  background: rgba(255, 255, 255, 0.15);
}

.category-item.active::before {
  width: 5px;
  background: var(--category-color);
}

.category-item i {
  margin-right: 12px;
  width: 20px;
  text-align: center;
  font-size: 16px;
}

.category-count {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  min-width: 30px;
  text-align: center;
}

@media (max-width: 992px) {
  .category-sidebar {
    width: 100%;
  }
}
</style>